<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />        
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAuo1qXamRgmRuYS3DB6fJhBQp0y1RcUF5uLP6ODZ-2Dz2OP5bYBRY8BrKk5Dkjv3bUcm_Ca5RZ3wgwQ"/>
        <script type="text/javascript" src="control.js"></script>
        <script type="text/javascript">
            //Bien toan cuc               
            var directionsDisplay = new google.maps.DirectionsRenderer();  
            var directionsService = new google.maps.DirectionsService();
            var map; 
            var ctaLayer;
            var myLocationMarker;
            var imageMyLocation;      
            var pointArray;
            var markersArray=[];
            
            var m_lat;
            var m_lng;
            
            var geocoder;
            
            //Ham khoi tao
            function initialize(){
                geocoder=new google.maps.Geocoder();
            	        
                var latlng = new google.maps.LatLng(10.762827,106.682551);
                var myOptions = {
                    zoom: 16,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    disableDefaultUI: true                                                        
                };
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                
                directionsDisplay.setMap(map);
                imageMyLocation = 'myLocation.png';
                google.maps.event.addListener(map,'click', function(event){      
                    addMarker(event.latLng);            
                });    
 
            }
            
            function findLocation(addres){
			    geocoder.geocode( {
			        address: addres
			    }, function(results, status) {    
			        if (status == google.maps.GeocoderStatus.OK) {			        
			            map.setCenter(results[0].geometry.location);
			            var marker = new google.maps.Marker({
			                map: map, 
			                position: results[0].geometry.location
			            });
			            markersArray.push(marker);
			        } 
			    });
			}
			
			function findLocation(addres, icon){
			    geocoder.geocode( {
			        address: addres
			    }, function(results, status) {    
			        if (status == google.maps.GeocoderStatus.OK) {			        
			            map.setCenter(results[0].geometry.location);
			            var marker = new google.maps.Marker({
			                map: map, 
			                icon: icon,
			                position: results[0].geometry.location
			            });
			            markersArray.push(marker);
			        } 
			    });
			}
			
            
            function findDirection(start, end, transport){
                var mode;
                if (transport == "DRIVING"){
                    mode = google.maps.DirectionsTravelMode.DRIVING;
                }else{
                    mode = google.maps.DirectionsTravelMode.WALKING;
                }
                var request = {
                    origin:start, 
                    destination:end,
                    travelMode: google.maps.DirectionsTravelMode.WALKING
                };
                directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                    }else{
                    	alert('Không thể xác định được đường đi');
                    }
                });
            }      
            function addMarker(location) {  
                var marker = new google.maps.Marker({
                    position: location,
                    map: map
                });
                markersArray.push(marker);    
                m_lat=location.lat();
                m_lng=location.lng();   
            }
			    
            function danhDauViTriTraffic(lat, lng,image)
            {
                var location=new google.maps.LatLng(lat,lng); 
                marker=new google.maps.Marker({
                    position:location,
                    map:map,
                    icon:image
                });      
                markersArray.push(marker);       
            }
            function addMarkerWithInfomation(lat, lng,image, topic, comment)
            {
              var location=new google.maps.LatLng(lat,lng); 
                marker=new google.maps.Marker({
                    position:location,
                    map:map,
                     icon:image
                });      
                markersArray.push(marker); 
                var p = document.createElement('p');
            	var a = document.createElement('a');
            	var b = document.createElement('em');    
                var infoWindow = new google.maps.InfoWindow;
                a.href = "#";
                a.innerHTML = "<b>" +topic+"</b>";
            	b.innerHTML = "<br>"+comment;            	
            	p.appendChild(a);
            	p.appendChild(b);
            	bindInfoWindow(marker, map, infoWindow, p);	 
            	map.setCenter(location);
            }
            function getMyLat()
            {
                var result=m_lat;
                m_lat=0;
                return result;
            }
            function getMyLng()
            {
                var result=m_lng;
                m_lng=0;
                return result;
            } 
			  
            // Deletes all markers in the array by removing references to them
            function deleteOverlays() {
                if (markersArray) {
                    for (i in markersArray) {
                        markersArray[i].setMap(null);
                    }
                    markersArray.length = 0;
                }
            }  
            function them(lat , lng) {
                var latlng = new google.maps.LatLng(lat,lng);  
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                });
                markersArray.push(marker);
            }      		
            //----------------Geocode------------------------------
            
            
            function convertAddressToCoordinate(MyAddress,statusText, timeUpdate,myicon,myImage )
            { 
            	var kqConvertToCoor;
            	 var p = document.createElement('p');
            	 var a = document.createElement('a');
            	 var b = document.createElement('em');     
				  var img=document.createElement('img');
                kqConvertToCoor="";
                geocoder.geocode( { 'address':MyAddress}, function(results, status) {
                    if(status==google.maps.GeocoderStatus.OK)
                    {              
                        kqConvertToCoor=results[0].geometry.location;
                         var marker=new google.maps.Marker({
	                        map:map,
	                        position:kqConvertToCoor,
	                        icon:myicon
                    	});  
                    	markersArray.push(marker);        
                        var infoWindow = new google.maps.InfoWindow;  
                        
                        a.href = "#";
                        a.innerHTML = "<b>" +statusText+"</b>";
                    	b.innerHTML = "<br>"+timeUpdate+"<br>";
                    	img.src=myImage;
						
                    	p.appendChild(a);
                    	p.appendChild(b);
						p.appendChild(img);
                    	bindInfoWindow(marker, map, infoWindow, p);	
                    }
                    else{
                        alert("Geocoder was not successful for the following reason:"+ status);
                    }
                });    
            }
                  
            //---------------End Geocoder--------------------------
      
            //----------------Search Place-----------------------------  
            google.load('search','1');
            var localSearch;
            function searchComplete() {         
                if (localSearch.results && localSearch.results.length > 0) {
                    for (var i = 0; i < localSearch.results.length; i++) {
                        var result= localSearch.results[i];
                        var myLatlng = new google.maps.LatLng(parseFloat(result.lat),
                        parseFloat(result.lng));                
                        var marker = new google.maps.Marker({                   
                            position: myLatlng,                   
                            map: map,                    
                            title:"info",
                            icon:myImageForSearch		                     
                        });			   
                        markersArray.push(marker);        
                        var infoWindow = new google.maps.InfoWindow;  
                        //-----------Thuc hien viec dinh dnagn lai du lieu--------------------------------
                        var p = document.createElement('p');
                        var a = document.createElement('a');
                        var b = document.createElement('b');
                        var c = document.createElement('c');
                        var d=document.createElement('d');
                        a.href = "#";
                        a.innerHTML = result.title;
                        b.innerHTML = "<br>" +
                            result.streetAddress;
                        var tenQuocGia="<br>";
                        if(result.city!="")
                        {
                            tenQuocGia=tenQuocGia+result.city+",";
                        }
                        if(result.region!="")
                        {
                            tenQuocGia=tenQuocGia+result.region+",";
                        }
                        if(result.country!="")
                        {
                            tenQuocGia=tenQuocGia+result.country;
                        }
                        c.innerHTML =tenQuocGia;
                        if(result.phoneNumbers && result.phoneNumbers.length>0)
                        {
                            d.innerHTML="<br>"+ result.phoneNumbers[0].number;
                        }      	
                        // Append search results to the HTML nodes
                        p.appendChild(a);
                        p.appendChild(b);
                        p.appendChild(c);
                        p.appendChild(d);
                        bindInfoWindow(marker, map, infoWindow, p);			      
                    }		
                }
            }
            var myImageForSearch;
            function onLoad(diaDiem , soThich, image) {
                myImageForSearch=image;
                // Create a LocalSearch instance.
                localSearch = new google.search.LocalSearch();    
                // Set the Local Search center point
                localSearch.setCenterPoint(diaDiem);   
                // localSearch object will have results in it.
                localSearch.setSearchCompleteCallback(this, searchComplete, null);    
                // Specify search quer(ies)
                localSearch.execute(soThich);      
                // Include the required Google branding.
                // Note that getBranding is called on google.search.Search
                google.search.Search.getBranding('branding');
            }   
            function getLatLng()
            {
                return latLng;				
            }
            function bindInfoWindow(marker, map, infoWindow, html) {
                google.maps.event.addListener(marker, 'click', function() {
                    infoWindow.setContent(html);
                    infoWindow.open(map, marker);
                });
            }
            //-----------------Ket thuc search Place----------------------------
        </script>
        <style type="text/css">
            html { height: 100%; }
            body { height: 100%; margin: 0px; padding: 0px; }
            #map_canvas { height: 100%; position: absolute;}
        </style>

    </head>
    <body onLoad="initialize();">        
        <div id="map_canvas" style="width:100%; height:100%;"></div>        
    </body>
</html>
